<template>
  <div class="main">
    <arrow :topList="topList"></arrow>
    <div class="my_list">
      <div class="top_title">内容管理 > {{ isEdit }}我的选题</div>
      <div class="my_form">
        <el-row >
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="140px">
            <el-col :span="24">
              <el-form-item label="内容名称：" prop="title">
                <div class="with640">
                  <el-input v-model="formData.title" placeholder="请输入内容名称" clearable
                    :style="{ width: '100%' }"></el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="内容目标：" prop="target">
                <div class="with640">
                  <el-input v-model="formData.target" placeholder="请输入内容目标" clearable :style="{ width: '100%' }">
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="内容摘要：" prop="digest">
                <div class="with640">
                  <el-input v-model="formData.digest" maxlength="52" :show-word-limit="true" placeholder="请输入内容摘要" clearable :style="{ width: '100%' }">
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="内容大纲：" prop="outline">
                <div class="with640">
                  <editors :value="formData.outline" v-model="formData.outline" :height="400"></editors>
                  <!-- <el-input v-model="formData.outline" type="textarea" placeholder="请输入内容大纲"
                  :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>-->

                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预期成果：" prop="results">
                <div class="with640">
                  <el-input v-model="formData.results" placeholder="请输入预期成果" clearable :style="{ width: '100%' }">
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">

              <el-form-item label="内容类型：">
                <el-radio-group v-model="formData.type">
                  <el-radio v-for="dict in dict.type.article_topic_type" :key="dict.value" :label="dict.value">{{
                    dict.label }}</el-radio>
                </el-radio-group>
              </el-form-item>

              <!-- <el-form-item label="内容类型：" prop="type">
                <div class="with640">
                  <el-input v-model="formData.type" placeholder="请输入内容类型" clearable :style="{ width: '100%' }">
                  </el-input>
                </div>
              </el-form-item> -->


            </el-col>
            <el-col :span="24">
              <el-form-item label="下载方式：">
                <el-radio-group v-model="formData.authStatus">
                  <el-radio v-for="dict in authList" :key="dict.value" :label="dict.value">{{
                    dict.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="日期范围：" prop="timeRange">
                <div class="with640">
                  <el-date-picker type="datetimerange" @change="timeTo" v-model="formData.timeRange"
                    format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{ width: '100%' }"
                    start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="23">
              <el-form-item label="素材归集" prop="sucai">
                <el-radio-group @input="radioHandle()" v-model="formData.sucai" size="medium">
                  <el-radio-button v-for="(item, index) in sucaiOptions" :key="index" :label="item.value"
                    :disabled="item.disabled">{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col> -->
            <el-col :span="24" style="padding-bottom: 100px;">
              <el-form-item size="large">
                <div class="with640" style="text-align: center;padding-top: 20px;">
                  <el-button type="primary" :loading="btnshow" @click="submitForm">开始创作</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </div>

    <el-dialog title="素材引用" :visible.sync="sucaiRequire" width="80%" center>
      <div class="pop">
        <el-radio-group @change="radioHandleInner()" v-model="formData.popsucai" size="medium">
          <el-radio-button v-for="(item, index) in popSucaiOption" :key="index" :label="item.value"
            :disabled="item.disabled">{{ item.label }}</el-radio-button>
        </el-radio-group>
        <div class="pop_title">
          <div style="padding-right: 10px;">关键词</div>
          <div style="width: 200px;padding-right: 10px;"><el-input v-model="keyWord" placeholder="请输入检索词" clearable
              :style="{ width: '100%' }">
            </el-input></div>
          <el-button type="primary" size="mini">查询</el-button>
        </div>
      </div>
      <article class="list_box">
        <div class="list_box_flex" v-for="v in picList">
          <div class="list_box_flex_img">
            <img :src="v.sourceUrl" width="200" height="144">
          </div>
          <div class="list_box_flex_txt">{{ v.materialTitle }}</div>
        </div>
      </article>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-size="100" layout="total, prev, pager, next, jumper" :total="400">
      </el-pagination>
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sucaiRequire = false">确定关联</el-button>
      </span>
    </el-dialog>

    <MyDia :isOnOpen="open" @updateProp="updateValue" @getEdit="getEdit"></MyDia>
  </div>
</template>

<script>
import arrow from '@/views/components/arrow'
import editors from '@/views/components/MEditor'
import MyDia from '@/views/content/addpic'
import { addMytopic, editMytopic } from '@/api/my/xuanti'
import { listMaterial } from "@/api/my"
import { mapActions } from 'vuex'
export default {
  dicts: ['article_topic_type'],
  components: { arrow, editors, MyDia },
  data() {
    return {
      isEdit: '',  //路由判定，是新增还是修改
      open: false,  //新增素材弹窗
      topList: {
        title: '流程指引',
        list: [
          { name: '素材管理', img: 'blue' },
          { name: '内容创作', img: 'blue' },
          { name: '专家审核', img: 'gray' },
          { name: '产品分发', img: 'gray' },
          { name: '传播管理', img: 'gray' },
        ]
      },
      authList: [{
        "label": "开放下载",
        "value": "0"
      }, {
        "label": "授权下载",
        "value": "1"
      }],
      keyWord: '',  //关键词
      picList: null,  //图片列表
      formData: {
        title: '', //内容名称
        target: '', //内容目标
        digest: '',  //内容摘要
        outline: '',  //大纲
        results: '',  //预期成果
        type: '',     //	内容类型  图片，视频，音频
        timeRange: null,
        startTime: '',  //开始时间
        endTime: '',  //结束时间
        sucai: 0,
        popsucai: 0,  //选中的素材值，1图片 3音频
        authStatus:"0",  //0开放下载 1授权下载
      },
      sucaiRequire: false,
      addSucai: false,
      popSucaiOption: [ //弹层单选
        // { 
        //   "label": "已关联",
        //   "value": 1
        // },
        {
          "label": "图片",
          "value": 1
        }, {
          "label": "音频",
          "value": 3
        }],
      sucaiOptions: [{
        "label": "素材引用",
        "value": 1
      }, {
        "label": "新增素材",
        "value": 2
      }, {
        "label": "委托素材",
        "value": 3
      }],
      rules: {
        title: [{
          required: true,
          message: '请输入内容名称',
          trigger: 'blur'
        }, {
          // pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          required: true,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        target: [],
        digest: [{
          required: true,
          message: '请输入内容摘要',
          trigger: 'blur'
        }],
        outline: [{
          required: true,
          message: '请输入内容大纲',
          trigger: 'blur'
        }],
        results: [],
        type: [{
          required: true,
          message: '请输入内容类型',
          trigger: 'blur'
        }],
        timeRange: [{
          required: true,
          message: '日期范围不能为空',
          trigger: 'change'
        }],
        // sucai: [{
        //   required: true,
        //   message: '单选框组不能为空',
        //   trigger: 'change'
        // }],
      },
      currentPage4: 4,  //弹窗素材分页
      btnshow:false
    }
  },
  async created() {
    let is_edit = this.$route.query.type
    if (is_edit == 1) {
      this.isEdit = '新增'
    } else {
      this.isEdit = '编辑'
      let handle = await this.getXuantiEdit(this.$route.query.topicId)
      if (this.$store.state.my.xuantiEdit.length < 1) {
        this.$router.push({ path: '/content/xuanti' })  //没有数据就退到列表
      } else {
        //修改回显
        if(this.$store.state.my.xuantiEdit.authStatus !==undefined){
          this.formData.authStatus =this.$store.state.my.xuantiEdit.authStatus.toString()
        }
        this.formData.title = this.$store.state.my.xuantiEdit.title
        this.formData.target = this.$store.state.my.xuantiEdit.target
        this.formData.digest = this.$store.state.my.xuantiEdit.digest
        this.formData.outline = this.$store.state.my.xuantiEdit.outline
        this.formData.results = this.$store.state.my.xuantiEdit.results
        this.formData.type = this.$store.state.my.xuantiEdit.type.toString()
        this.formData.topicId = this.$store.state.my.xuantiEdit.topicId
        this.formData.timeRange = [this.$store.state.my.xuantiEdit.startTime, this.$store.state.my.xuantiEdit.endTime]
      }
      // console.log(this.$store.state.my.xuantiEdit);
    }
    this.getList({ type: 1 })  //默认图片
  },
  computed: {
    edit() {
      return this.$store.state.my.xuantiEdit
    }
  },
  methods: {
    timeTo(e) {
      this.formData.startTime = e[0]
      this.formData.endTime = e[1]
      // console.log(e);
    },
    async getList(type) {  //
      let res = await listMaterial(type)
      this.picList = res.rows.map(v => {
        v.sourceUrl = process.env.VUE_APP_ImgUrlHeader + v.sourceUrl
        return v
      })
      //console.log(this.picList,111);
    },
    getEdit() {  //新增成功后，刷新列表用，这里不需要刷新

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    radioHandle() {
      let change = this.formData.sucai  //1素材引用  2新增素材 3委托素材
      if (change == 1) { //1素材引用
        this.open = false
        this.sucaiRequire = true
        this.addSucai = false
      }
      if (change == 2) { //2新增素材
        this.open = true
        this.sucaiRequire = false
        this.addSucai = true
      }
      if (change == 3) { //3委托素材
        this.open = false
        this.sucaiRequire = false
        this.addSucai = false
        this.$message.info('委托素材暂未开通')
      }
      // console.log(a);
    },
    radioHandleInner() {
      this.getList({ type: this.formData.popsucai })
      // console.log();
      //弹窗内容
    },
    async postData() {
      let res = await addMytopic(this.formData)
  this.postData=true
      if (res.code == 200) {
  this.postData=false

        this.$message.success('添加成功')
        this.$router.push({ path: '/content/edit_content', query: { type: this.$route.query.type, id: res.data } })
      } else {
  this.postData=false

        this.$message.success('添加失败，请稍后重试')
      }
      console.log(res);
    },
    async putData() {
      let res = await editMytopic(this.formData)
      if (res.code == 200) {
        this.$message.success('修改成功')
        this.$router.push({ path: '/content/edit_content', query: { 'type': this.$route.query.type, 'topicId': this.$route.query.topicId } })
      } else {
        this.$message.success('修改失败，请稍后重试')
      }
      // console.log(res);
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        let is_edit = this.$route.query.type
        if (is_edit == 1) {
          //this.isEdit = '新增'
          //新增
          this.postData()
        } else {
          //编辑
          this.putData()
        }

        // TODO 提交表单
      })

    },
    updateValue(newProp) {
      this.open = newProp;
    },
    ...mapActions([
      'getXuantiEdit'
    ]),
  },

}
</script>

<style lang='scss' scoped>
.main {
  background-color: #f5f5f5;

  .my_list {
    margin-top: 10px;
    background-color: white !important;
    padding-left: 32px;

    .top_title {
      padding-top: 20px;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 700;
      color: #3D3D3D;
      line-height: 21px;
    }

    .my_form {
      //width: 80%;
     // margin: 0 auto;
      margin-top: 38px;

    }

    .with640 {
      width: 950px;
    }
  }

  .pop {
    display: flex;
    justify-content: space-between;

    .pop_title {
      display: flex;
      align-items: center;
    }
  }

  .list_box {
    margin-top: 20px;
    display: flex;
    // width: 1500px;
    flex-wrap: wrap;

    .list_box_flex {
      display: flex;
      align-items: center;
      flex-direction: column;
      flex-wrap: wrap;
      margin-right: 30px;
      width: calc((100% - 30px) / 5);

      &:nth-child(4n) {
        margin-right: 0;
      }

      .list_box_flex_img {
        width: 200px;
        height: 144px;
        // background-color: aquamarine;
      }

      .list_box_flex_txt {
        width: 200px;
        margin-top: 10px;
        margin-bottom: 30px;
      }
    }
  }
}
</style>